<template>
	<basic-container>
		<grid-layout :layout="layout" :col-num="12" :row-height="30" :is-draggable="false" :is-resizable="false"
		 :vertical-compact="true" :use-css-transforms="true">
			<grid-item v-for="(item,index) in layout" :key="index" :static="item.static" :x="item.x" :y="item.y" :w="item.w" :h="item.h"
			 :i="item.i">
				<span class="text">{{itemTitle(item)}}</span>
			</grid-item>
		</grid-layout>
	</basic-container>
</template>

<script>
	import request from '@/router/axios';
	import VueGridLayout from 'vue-grid-layout';

	export default {
		components: {
			GridLayout: VueGridLayout.GridLayout,
			GridItem: VueGridLayout.GridItem
		},
		data() {
			return {
				layout:[{
					"x": 0,
					"y": 0,
					"w": 2,
					"h": 2,
					"i": "0",
					static: false
				},
				{
					"x": 2,
					"y": 0,
					"w": 2,
					"h": 2,
					"i": "1",
					static: true
				},
				{
					"x": 4,
					"y": 0,
					"w": 2,
					"h": 2,
					"i": "2",
					static: false
				},
				{
					"x": 6,
					"y": 0,
					"w": 2,
					"h": 2,
					"i": "3",
					static: false
				},
				{
					"x": 8,
					"y": 0,
					"w": 2,
					"h": 2,
					"i": "4",
					static: false
				},
				{
					"x": 10,
					"y": 0,
					"w": 2,
					"h": 2,
					"i": "5",
					static: false
				},
				{
					"x": 0,
					"y": 2,
					"w": 2,
					"h": 2,
					"i": "6",
					static: false
				},
				{
					"x": 2,
					"y": 2,
					"w": 2,
					"h": 2,
					"i": "7",
					static: false
				},
				{
					"x": 4,
					"y": 2,
					"w": 2,
					"h": 2,
					"i": "8",
					static: false
				},
				{
					"x": 6,
					"y": 2,
					"w": 2,
					"h": 2,
					"i": "9",
					static: true
				},
				{
					"x": 8,
					"y": 2,
					"w": 2,
					"h": 2,
					"i": "10",
					static: false
				},
				{
					"x": 10,
					"y": 4,
					"w": 2,
					"h": 2,
					"i": "11",
					static: false
				},
				{
					"x": 0,
					"y": 5,
					"w": 2,
					"h": 2,
					"i": "12",
					static: false
				},
				{
					"x": 2,
					"y": 5,
					"w": 2,
					"h": 2,
					"i": "13",
					static: false
				},
				{
					"x": 4,
					"y": 8,
					"w": 2,
					"h": 2,
					"i": "14",
					static: false
				},
				{
					"x": 6,
					"y": 8,
					"w": 2,
					"h": 2,
					"i": "15",
					static: false
				},
				{
					"x": 8,
					"y": 10,
					"w": 2,
					"h": 2,
					"i": "16",
					static: false
				},
				{
					"x": 10,
					"y": 4,
					"w": 2,
					"h": 2,
					"i": "17",
					static: false
				},
				{
					"x": 0,
					"y": 9,
					"w": 2,
					"h": 2,
					"i": "18",
					static: false
				},
				{
					"x": 2,
					"y": 6,
					"w": 2,
					"h": 2,
					"i": "19",
					static: false
				}
			]
			};
		},
		created() {},
		mounted() {
		},
		methods: {
			itemTitle(item) {
			    var result = item.i;
			    if (item.static) {
			        result += " - 有库存";
			    }
			    return result;
			}
		}
	};
</script>

<style>
	.vue-grid-item:not(.vue-grid-placeholder) {
	    background: #ccc;
	    border: 1px solid black;
	}
	
	.vue-grid-item.resizing {
	    opacity: 0.9;
	}
	
	.vue-grid-item.static {
	    background: #cce;
	}
	
	.vue-grid-item .text {
	    font-size: 24px;
	    text-align: center;
	    position: absolute;
	    top: 0;
	    bottom: 0;
	    left: 0;
	    right: 0;
	    margin: auto;
	    height: 100%;
	    width: 100%;
	}
	
	.vue-grid-item .no-drag {
	    height: 100%;
	    width: 100%;
	}
	
	.vue-grid-item .minMax {
	    font-size: 12px;
	}
	
	.vue-grid-item .add {
	    cursor: pointer;
	}</style>
